import { delectDevelopRuleApi, getDevelopRuleList } from '@/services/api';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Popconfirm, message } from 'antd';
import { useRef, useState } from 'react';
import ClientDrawer from '../Drawer/ClientDrawer';

const DevelopRule: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const [clientDrawerParams, setclientDrawerParams] = useState({
    open: false,
    info: {},
  });

  const columns: any = [
    {
      title: '手机号',
      dataIndex: 'user__mobile',
      hideInTable: true,
    },
    {
      title: '姓名',
      dataIndex: 'user__name__contains',
      hideInTable: true,
    },
    {
      title: '商户',
      dataIndex: ['user', 'name'],
      hideInSearch: true,
      render: (text: string, record: any) => {
        return (
          <div>
            {record?.to_user?.id} - {record?.to_user?.name}
          </div>
        );
      },
    },
    {
      title: '手机号',
      dataIndex: ['to_user', 'mobile'],
      hideInSearch: true,
    },
    {
      title: '半月奖励',
      dataIndex: 'half',
      hideInSearch: true,
    },
    {
      title: '包月奖励',
      dataIndex: 'subscription',
      hideInSearch: true,
    },
    {
      title: '按次奖励',
      dataIndex: 'sequence',
      hideInSearch: true,
    },
    {
      title: '车电一体奖励',
      dataIndex: 'integrated',
      hideInSearch: true,
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 100,
      render: (text: any, record: any) => [
        <a
          key="editable"
          onClick={() => {
            setclientDrawerParams({
              open: true,
              info: {
                ...record,
                user: record?.to_user?.id,
              },
            });
          }}
        >
          编辑
        </a>,
        <Popconfirm
          key="bofan"
          title={`确定删除该规则吗？`}
          onConfirm={async () => {
            try {
              await delectDevelopRuleApi(record?.id);
              message.success('删除成功');
              actionRef.current?.reload();
            } catch (error) {}
          }}
          okText="Yes"
          cancelText="No"
        >
          <Button className="_common_card_left_item_btn" type="link" danger>
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <>
      <ProTable
        bordered
        columns={columns}
        actionRef={actionRef}
        cardBordered
        request={async (_parame) => {
          const { pageSize, current, user__mobile, user__name__contains } =
            _parame;

          const { data } = await getDevelopRuleList({
            page: current,
            size: pageSize,
            filters:
              user__name__contains && user__mobile
                ? JSON.stringify({
                    user__name__contains: user__name__contains,
                    user__mobile: user__mobile,
                  })
                : undefined,
          });
          return {
            data: data?.list ?? [],
            success: true,
            total: data?.count,
          };
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          defaultPageSize: 10,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setclientDrawerParams({
                open: true,
                info: {},
              });
            }}
            type="primary"
          >
            新增绑定规则
          </Button>,
        ]}
      />

      {clientDrawerParams.open && (
        <ClientDrawer
          open={clientDrawerParams.open}
          info={clientDrawerParams.info}
          close={() => {
            setclientDrawerParams({
              open: false,
              info: '',
            });
          }}
          onFinsh={() => {
            setclientDrawerParams({
              open: false,
              info: '',
            });

            actionRef.current?.reload();
          }}
        ></ClientDrawer>
      )}
    </>
  );
};

export default DevelopRule;
